<template>
    <div id="sell_con" :class="android?'sell_con android_top':'sell_con'" :style="{'height':bodyH}" ref="box">
        <div class="shadowBox" @click="btnOk('hidden')"></div>
        <div class="pop_box" id="popBox">
            <div class="pop_tit">
                <p :class="{hot:tab==0}" @click="tabSwitch('0')"><span class="_text">兑换给小芸</span><span class="swak"></span></p>
                <p :class="{hot:tab==1}" @click="tabSwitch('1')"><span class="_text">兑换给用户</span><span class="swak"></span></p>
            </div>
            <!-- <div class="pop_info" @click="goCouponDetl(param)"> -->
            <div class="pop_info" >
                <div class="pop_info_tit">{{param.name}}</div>
                <div class="pop_info_center drop_down">
                    <div class="cardBg1">
                        <div class="bgLine"><img src="../../images/cardBg.jpg"></div>
                        <div class="cardBg2">
                            <div class="card_tit">
                                <span class="right">有效期：{{param.validatyEnd | strDate(3)}}</span>
                                <p>{{param.mchtName}}</p>
                            </div>
                            <div class="couponDiv">
                              <coupon-denomination :item="param"></coupon-denomination>
                            </div>
                            <div class="card_info">
                                <div class="card_name">
                                    {{param.name}}
                                </div>
                                <div class="pop_info_price">
                                    <span>{{param.price}}</span>芸券
                                </div>
                                <div class="coupon_info_item">
                                    <p class="star_con">
                                        <star :couponComScore="param.comScore"></star>
                                    </p>
                                    <p class="info_pad">{{param.comNum}}条</p>
                                </div>
                                <div class="clear"></div>
                                <div class="coupon_info_item color_gray">
                                    已出售{{param.soldnum}} &nbsp; 已使用{{param.usednum}}
                                </div>
                            </div>
                        </div>
                        <div class="pop_info_bot sm_font"  @click="xzShow">
                            <i :class="xuzhi ? 'icon iconfont icon-iconfontunfold' : 'icon iconfont icon-down'"></i>使用说明
                        </div>
                        <div class="rule_all" id="ruleAll">
                            <div class="coupon_dtl_instr">
                                <ul id="rule">
                                    <li v-if="scpoe"><span>{{scpoe + extra}}</span></li>
                                    <li><span>有效期{{param.validatyBegin|strDate(3)}}至{{param.validatyEnd|strDate(3)}}</span></li>
                                    <li v-if="param.disableDate"><span>{{param.disableDate|businessDay}}不可以使用</span></li>
                                    <li><span>使用时间：{{param.useTime|timeAnalysis}}</span></li>
                                    <li v-if="param.restricted"><span>满{{param.restricted}}元可使用</span></li>
                                </ul>
                            </div>
                            <div class="coupon_dtl_instr2" id="ruleT">
                                <ul>
                                    <li v-if="diejia"><i class="iconfont icon-kediejiashiyong-"></i>可叠加使用{{param.useNum}}张</li>
                                    <li v-if="gongtong"><i class="iconfont icon-keyuqitadianziquangongtongshiyong-"></i>可与其他券同使用</li>
                                    <li><i class="iconfont icon-buzhaolingbuduixian-"></i>不找零不兑现</li>
                                </ul>
                            </div>
                        </div>

                    </div>
                </div>

                <div id="inst" class="instructions">
                    <p v-show="tab=='0'">兑换给系统用户小芸，价格自动计算<br/>随电子券数量、过期时间等因素变化</p>
                    <p v-show="tab=='1'">兑换给用户，您可以自定义价格。<br/>电子券过期前3天不得出售。</p>
                </div>
                <div class="pop_space"></div>
            </div>
            <div class="pop_box_left"></div>
            <div class="pop_box_right"></div>
            <div class="pop_box_input" id="popBoxInput">
                <div class="left_price">
                    <p v-show="tab=='0'">
                    小芸出价 <span>{{param.price*exchangeNum}}芸券</span>
                    </p>
                    <p v-show="tab=='1'">
                        挂单价格 <input @focus="inputFocus" @keypress="keyPress" type="number" class="input_price_input" @keyup="gaRriceEvent()" v-model="gaRrice">芸券
                    </p>
                </div>
                <div class="input_price">
                    兑换数量<input type="number" @keypress="keyPress" @focus="inputFocus" @blur="inputBlur" class="input_price_input" v-model="exchangeNum">
                </div>
            </div>
            <div class="feeClass">
                <div class="paddingDiv">
                    <span v-show="tab=='0'" class="right">0芸券</span><span v-show="tab=='1'" class="right">{{fee}}芸券</span>手续费

                </div>
            </div>
        </div>
        <div class="pop_btn" id="popBtn">
            <button v-on:click="btnOk('post')" ref="btn">确 认</button>
        </div>
    </div>
</template>
<script>
    import getData from '../../service/getData.js';
    import getData4 from '../../service/getData4.js';
    import {mapState} from 'vuex';
    import { Toast,Indicator} from 'mint-ui'
    import star from './star.vue';
    import couponNum from './couponNum.vue'
    import CardList from "../../pages/center/cardList.vue";

    export default {
        name:'sell',
        props:["param"],
        data:function(){
            return{
                bodyH:'',
                tab:"0",
                myPrice:'1',
                gaRrice:'1',//挂单价格
                exchangeNum:'1',
                fee:0,
                feeArray:[],
                xuzhi:false,
                scpoe:'',
                extra:'',
                diejia:'',
                gongtong:'',
                android:false

            }
        },
        components:{
            CardList,
            star,
            couponNum
        },
        created:function(){
            let me = this;
            this.bodyH = window.innerHeight + 'px';

        },
        computed:{
            ...mapState({
                userInfo:state => state.user.userInfo,
            })
        },
        mounted(){
            if(this.tab == 0){
                this.myPrice = this.param.price;
            }else{
                this.myPrice = this.param.gaRrice;
            }
            let me = this;
            getData.fee().then(reps => {
                me.feeArray = JSON.parse(JSON.stringify(reps.content));
                var array = reps.content;
                for(var i=0;i< array.length;i++){
                    if(array[i].feeValue <= me.myPrice * me.exchangeNum){
                        me.fee =  parseInt(me.myPrice * me.exchangeNum * array[i].feeScale);
                        return;
                    }else{
                    	me.fee =  0
                    }
                }
            });
        },
        watch:{
            param(){
                if(this.tab == 0){
                    this.myPrice = this.param.price;
                }else{
                    this.myPrice = this.param.gaRrice;
                }
                let me = this;
                getData.fee().then(reps => {
                    me.feeArray = JSON.parse(JSON.stringify(reps.content));
                    var array = reps.content;
                    for(var i=0;i< array.length;i++){
                    if(array[i].feeValue <= me.myPrice * me.exchangeNum){
                        me.fee =  parseInt(me.myPrice * me.exchangeNum * array[i].feeScale);
                        return;
                    }else{
                    	me.fee =  0
                    }
                }
                });
                getData4.getDishType({mchtId:me.param.mchtId}).then(data =>{
                    var scpoeList = data.content.lowTypeNameList
                    me.diejia = me.param.useRule.indexOf("M") >=0;
                    me.gongtong = me.param.useRule.indexOf("D") >=0;
                    // me.userTime = rep.content.useTime.split(",").join(" ");
                    if(me.param.scpoe.indexOf("T") >=0){
                        me.extra = "不可用"
                    }else{
                        me.extra = "可用"
                    }

                    //获取商户可用或非可用菜类列表
                    let scpoe = me.param.scpoe.substr(1,me.param.scpoe.length+1).split(",")
                    let type =[];
                    scpoe.find(data => {
                        scpoeList.forEach(value => {
                            if(value.typeId == data){
                                type.push(value.typeName);
                            }
                        })
                        me.scpoe = type.join("、")
                    })
                });

            },
            exchangeNum(){

                let me = this,
                    array = me.feeArray;
                for(var i=0;i< array.length;i++){
                    if(array[i].feeValue <= me.myPrice * me.exchangeNum){
                        me.fee =  parseInt(me.myPrice * me.exchangeNum * array[i].feeScale);
                        return;
                    }else{
                    	me.fee =  0
                    }
                }
            },
            gaRrice(){
                let me = this,
                    array = me.feeArray;
                var str = this.gaRrice.toString();
                this.myPrice = this.gaRrice;
                for(var i=0;i< array.length;i++){
                    if(array[i].feeValue <= me.myPrice * me.exchangeNum){
                        me.fee =  parseInt(me.myPrice * me.exchangeNum * array[i].feeScale);
                        return;
                    }else{
                    	me.fee =  0
                    }
                }
            },
            myPrice(){
                let me = this,
                    array = me.feeArray;
                for(var i=0;i< array.length;i++){
                    if(array[i].feeValue <= me.myPrice * me.exchangeNum){
                        me.fee =  parseInt(me.myPrice * me.exchangeNum * array[i].feeScale);
                        return;
                    }else{
                    	me.fee =  0
                    }
                }
            }
        },
        filters:{
            timeAnalysis:function(value) {
                if(!value){
                    return;
                };
                if (value.indexOf('null')>0) {
                    value=value.substring(0,value.indexOf(','));
                }
                return value
            }
        },
        methods:{
            gaRriceEvent(){
                this.gaRrice = this.gaRrice;
                // console.log(this.gaRrice)
                var str = this.gaRrice.toString();
                if(str.length >3){
                    str = str.substring(0,3);
                }
                if(str.length>1){
                    // this.gaRrice = parseInt(str);
                    this.gaRrice = str;
                }

            },
            goCouponDetl(params){
                Storage.set("couponInfo",params);
                // this.$router.push({name:'couponDetail',query:{type:'noExchange'}});
                this.$router.push({
                  name:'couDetail',
                  query: {
                    type:'noExchange',
                    couponId: params.couponId,
                    mchtId: params.mchtId,
                    seq: params.seqNo||'',
                    usrId: '',
                    usrPicId: ''
                  }
                });
            },
            tabSwitch:function(num){

                if(num == 0){
                    this.myPrice = this.param.price;
                    console.log(this.myPrice)
                }else{
                    this.myPrice = this.gaRrice;
                    console.log(this.myPrice)
                }
                this.tab = num;
            },
            xzShow:function(){
                var allHeight=document.getElementById('rule').offsetHeight+document.getElementById('ruleT').offsetHeight;
                if (!this.xuzhi) {
                    this.xuzhi=true;
                    document.getElementById('ruleAll').style.opacity=1;
                    document.getElementById('inst').style.marginTop=allHeight+5+'px';
                    document.getElementById('sell_con').style.paddingTop=5+'%';
                    if(allHeight >= 122){
                        document.getElementById('sell_con').style.paddingTop=2+'%';
                    }
                }else{
                    this.xuzhi=false;
                    document.getElementById('ruleAll').style.opacity=0;
                    document.getElementById('inst').style.marginTop=0;
                    document.getElementById('sell_con').style.paddingTop=20+'%';
                }

            },
            btnOk:function(type){///出售
                if(type == 'hidden'){
                    this.price = 1;
                    this.exchangeNum = 1;
                    this.$emit("btnOk","hidden");
                    return
                }
                if (this.tab == 1) {
                    if(parseInt(this.gaRrice) <= 0||this.gaRrice=='' || !parseInt(this.gaRrice)){
                        Toast({
                            message: '请正确出售价格',
                            duration: 1000
                        });
                        return
                    }
                }

                if(this.tab == '0'){
                    this.price = this.param.price;
                }
                if(this.param.num < this.exchangeNum){
                    Toast({
                        message: '出售张数大于拥有张数',
                        duration: 1000
                    });
                    return
                }
                if(this.exchangeNum <= 0){
                    Toast({
                        message: '请填写正确的出售数量',
                        duration: 1000
                    });
                    return
                }

                // Indicator.open('加载中...');
                this.$store.commit('changeState', true)
                let me = this;
                var time = new Date().format("YMMddhhmmss");
                console.info(this.$refs);
//                this.$refs.btn.disabled=true;
                getData.sellCoupon({method:'post',data:{
                    couponId:me.param.couponId,
                    mchtId:me.param.mchtId,
                    sellNum:this.exchangeNum,
                    sellType:me.tab,
                        // fee:me.fee,
                        fee:0,
                    yunCur:parseInt(this.myPrice)
                }},me.userInfo.usrId).then(rep => {
                    if (rep.respCode=='00') {
                        Toast({
                            message: '操作成功',
                            duration: 1000
                        });
                        me.cardTotal()
                    }else{
                        setTimeout(function() {
                            Toast({
                                message: rep.errorInfo,
                                duration: 1000
                            });
                        },200);
                    }
                }).catch(rep => {
                    this.$emit("btnOk");
                });



            },
            //安卓聚焦
            inputFocus:function(){
                let me = this;
                // this.android=true;
               if (/(Android)/i.test(navigator.userAgent)) {
                    this.android=true;
                }

                //兼容安卓软键盘收起时样式不居中问题
                let winHeight = window.innerHeight;
                let arr=[];
                window.onresize = function() {
                    me.isKeybordAvail = true;
                    let newHeight = window.innerHeight;
                    // arr[0]阀值大于140判断为键盘弹出
                    arr.push(winHeight-newHeight);
                    if(arr[0]>140)
                    {
                        document.getElementById("popBox").style.transform="translateY(0rem)";
                        document.getElementById("popBtn").style.transform="translateY(0rem)";
                    }
                    // arr[1]阀值小于140判断为键盘收起
                    if (arr[1]  < -140) {
                        document.getElementById("popBox").style.transform="translateY(4rem)";
                        document.getElementById("popBtn").style.transform="translateY(4rem)";
                    }
                    winHeight = newHeight
                }
            },
            inputBlur:function(){
                //this.android=false;
            },
            //只能输入数字，禁止输入点
            keyPress() {
                let keyCode = event.keyCode;
                if (keyCode >= 48 && keyCode <= 57) {
                    event.returnValue = true;
                } else {
                    event.returnValue = false;
                }
            }
        }
    }
</script>
<style>
    .shadowBox{width: 100%;height: 100%;background: rgba(0,0,0,.8); position: fixed;left: 0;top:0;z-index: -1;}
    /*sell_con{position: fixed;width: 100%;left: 0;top:0;bottom:0;display: -webkit-flex;display:flex;-webkit-justify-content:center;justify-content:center;*/
    /*-webkit-align-items:center;align-items:center;-webkit-flex-direction:column;flex-direction:column;z-index:11;}*/
    .sell_con{position: fixed;width: 100%;left: 0;top:0;bottom:0;z-index:44;padding-top:20%;}
    .recallBox{width: 75%;position: relative;margin:0 auto;}
    .pop_box{width: 75%;min-height: 10rem;position: relative;margin:0 auto;}
    .pop_btn{margin-left:37%;}
    .pop_tit{height: 3rem;line-height:3rem;border-top-left-radius: .2rem;border-top-right-radius: .2rem;overflow: hidden;color:#c798a2;}
    .pop_tit p{float: left;height: 100%;text-align: center;position: relative;}
    .pop_tit p:first-child{width: 50%}
    .pop_tit p:last-child{width:-webkit-calc(50% - 1rem);}
    .pop_tit p span.swak{height: 100%;position: absolute;display:none;right:-.95rem;top:0;z-index:1;border-left:1rem solid #9e2944;border-top:3rem solid transparent;}
    .pop_tit p span._text{display:block;height:100%;background:#9e2944;border-top-right-radius: .2rem;border-top-left-radius: .2rem;}
    .pop_tit p:last-child span.swak{display: block;}
    .pop_tit p.hot{color:#fff;}
    .pop_tit p.hot span._text{background:linear-gradient(to top right, #ec4e89, #f9597b);}
    .pop_tit p.hot span.swak{display: block;border-left:1rem solid #f9597b;}

    .pop_info{background: linear-gradient(to top right, #ed4f87, #f95a7c);min-height: 22rem;}
    .pop_info_tit{line-height: 3rem;height: 3rem;text-align: center;color:#fff;font-size:1rem;}
    .pop_info_center{padding:0 .667rem;height: 10rem;min-height:10rem;}
    /* .pop_info_center div,.pop_info_center p{font-size: .8rem;} */
    .pop_info_center .card_name{line-height: 1.6rem;overflow: hidden;text-overflow:ellipsis;white-space: nowrap;font-size: 1rem}
    .pop_info_center .coupon_info_item{font-size: .8rem;}
    .pop_info_center .icon{font-size: .8rem;}
    .pop_info_center .pop_info_price{position: absolute;right: .6rem;top:4.6rem;line-height: 1.2rem;text-align: center;font-size:.7rem !important;width: 4rem;}
    .pop_info_center .cardBg1{box-shadow:0 0 1rem rgba(0,0,0,.5);}
    .pop_info_price span{display: block;color:#ec4e8a;font-family: Arial;font-size:1.6rem;}
    .pop_info_bot{position: absolute;bottom:-0.25rem;left: 0;width:-webkit-calc(100% - 1.334rem);height: 2rem;line-height:2rem;z-index:3;margin: 0 .667rem;color:#666;}
    .pop_info_bot .icon{float: right;}
    .instructions{font-size: .8rem;text-align: center;padding: .5rem .6rem;line-height: 1.2rem;color:#fff;}
    .pop_space{height: 3rem;padding-bottom:2rem;}
    .pop_box_input{position: absolute;bottom:3rem;height: 3rem;line-height:3rem;background: #fff;left:-1.4rem;width:-webkit-calc(100% + 2.8rem);z-index:10;}
    .pop_box_left{border-top:1rem solid transparent;border-left:0;border-right:1.4rem solid #890537;border-bottom:1rem solid transparent;position: absolute;bottom:2rem;left:-1.4rem;z-index:1;height:3rem;}
    .pop_box_right{border-top:1rem solid transparent;border-right:0;border-left:1.4rem solid #890537;border-bottom:1rem solid transparent;position: absolute;bottom:2rem;right:-1.4rem;z-index:1;height:3rem;}
    .left_price{height: 1.6rem;line-height:1.6rem;margin-top:.7rem;font-size:.9rem;color:#999;border-right:1px solid #ec4e89;float: left;width: 50%;text-align: center;box-sizing: border-box;}
    .left_price span{font-size:1.2rem;color:#333;padding-left: .6rem;font-family: Arial;}
    .input_price{float: left;text-align: center;color:#999;width: 50%;font-size:1rem;}
    .input_price_input{width: 1.6rem;height: 1.6rem;background: #f2f2f2;border-radius: .2rem;margin-left: .6rem;color:#ec4e8b;text-align: center;font-size: 1rem;}
    .pop_btn button{height: 2.4rem;padding: 0 2rem;font-size: 1rem;background: #7f7f7f;border: 1px solid #fff;border-radius: 1.2rem;color:#fff;margin-top: 1rem;}
    .feeClass{position: absolute;left: 0;width: 100%;color:#fff;bottom: .5rem;font-size:1rem;}
    .paddingDiv{padding:0 .667rem;height: 2rem;line-height: 2rem;}

    .drop_down .coupon_dtl_instr{padding: 10.2rem 0 0.2rem;background-color: #fff;}
    .drop_down .coupon_dtl_instr2{margin:0;padding:0.3rem 0.3rem;border-radius: 0 0 3px 3px;}
    .pop_info_center .cardBg1{z-index: 9;}
    .drop_down .coupon_dtl_instr li{font-size: 0.8rem;line-height: 1.6}
    .drop_down .coupon_dtl_instr li span{font-size:0.8rem}
    .drop_down .card_tit{color:#666;}
    .drop_down .coupon_info_item{color:#666;}
    .drop_down .coupon_dtl_instr2 li{font-size: 0.8rem;line-height: 1.2rem}
    .drop_down .coupon_dtl_instr2 li i{font-size: 1.2rem}
    .drop_down .coupon_dtl_instr ul{padding-left: 1.5rem;}
    .pop_info .instructions{margin-bottom: 1rem}
    .ins_mgt{margin-top: 110px;}
    .rule_all{opacity: 0;z-index: 5}
    .coupon_info_item .info_pad{line-height: 1.5rem}
    .android_top{top:-6.8rem;}
</style>
